<template>
  <div class="bar">
    <div class="bar-header">
      <div>
        <span>时间范围: </span>
        <a-month-picker
          placeholder="选择年月"
          @change="onChange"
          v-model="timeModel"
        />
      </div>
      <div class="bar-header-btnClass">
        <a-button type="primary" @click="statisticClick" class="btn"
          >统计</a-button
        >
        <a-button @click="resetClick" class="btn">重置</a-button>
        <a-button @click="exportData" class="btn">导出</a-button>
      </div>
    </div>
    <div class="chart-main" ref="chartInstance"></div>
  </div>
</template>

<script>
import mixinsBackStack from '@/views/backstageSupport/mixins'
import { getMonthDateBase, exportDateBase } from '@/api/oprationStatistics'
var date = new Date();
const nowTime = date.getFullYear() + '-' + Number(date.getMonth() + 1)

export default {
  mixins: [mixinsBackStack],

  data() {
    return {
      time: '',
      chartInstance: null,
      xData: [],
      yData: [],
      timeModel: ''
    }
  },
  components: {
  },
  mounted() {
    this.getCounts()
    window.addEventListener('resize', () => this.resizeChart())
  },
  methods: {
    async exportData() {
      const createTime = this.time || nowTime
      const { msg } = await exportDateBase({ createTime: createTime + '-1 00:00:00' })
      const a = document.createElement('a')
      a.href = msg
      a.download = '专利数据库使用情况统计'
      a.click()
    },
    async getCounts(beginTime) {
      //默认使用当前时间
      const createTime = beginTime || nowTime
      const { data } = await getMonthDateBase({ createTime: createTime + '-1 00:00:00' })
      this.xData = []
      this.yData = []
      data.forEach(element => { //获取所有有数据的天数
        this.xData.push(element.remark)
      });
      this.xData.sort()
      const tem = new Array(this.xData.length).fill(0);
      this.yData = data.reduce((pre, cur) => {  //将数据对应的天数放在数据上，没有的补0
        this.xData.forEach(() => {
          let have = this.xData.indexOf(cur.remark)
          tem[have] = Number(cur.count)
        })
        pre = tem
        return pre
      }, [])
      this.getChart()
    },
    getChart() {
      if (this.chartInstance) {
        this.chartInstance.dispose()
      }
      this.chartInstance = this.$echarts.init(this.$refs.chartInstance)
      let option = {
        tooltip: {
          textStyle: {
            align: 'left'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.xData,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '单位:人次',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#666'
              }
            }
          }
        ],
        series: [
          {
            name: '',
            type: 'bar',
            barWidth: '50',
            itemStyle: {
              barBorderRadius: [0, 0, 0, 0],
              color: function () {
                let colorList = ['#c23531',]
                return colorList[0]
              }
            },
            label: {
              show: true,
              position: 'top'
            },
            data: this.yData
          }
        ]
      }
      this.chartInstance.setOption(option)
      // 下面的是自适应屏幕大小去缩放
      this.$nextTick(() => {
        setTimeout(() => this.resizeChart(), 500)
      })
    },
    onChange(date, dateString) {
      this.time = dateString
    },
    statisticClick() {
      this.getCounts(this.time)
    },
    resetClick() {
      this.timeModel = null //清空timePick
      this.time = nowTime
      this.getCounts(nowTime)
    },
    resizeChart() {
      this.chartInstance.resize()
    }
  },
  beforeDestroy() {
    // eslint-disable-next-line no-unused-expressions
    this.chartInstance && this.chartInstance.dispose()
  }
}
</script>
<style lang="scss" scoped>
.statisticTop {
  width: 100%;
  display: flex;
  margin: 20px;
  .btnClass {
    margin-left: 20px;
    .btn {
      margin-left: 10px;
    }
  }
}
.chart-main {
  width: 100%;
  height: 50vh;
}
</style>
